<!--
 * @Description: 网站-页头
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2025-06-06
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2025-06-12
-->
<script lang="ts" setup>
  import { computed, onMounted, ref } from 'vue'
  import { useRoute, useRouter } from 'vue-router'

  import { HeaderImgEnum } from '/@/enums/imageEnum'

  const route = useRoute(),
    router = useRouter()

  const scrollFlag = ref<boolean>(false)

  enum MenuEnum {
    /** 首页 */
    HOME = 'home',
    /** 要素治理平台 */
    DATA_GOVERN = 'data-govern',
    /** 要素流通平台 */
    DATA_FLOW = 'data-flow',
    /** 要素加工平台 */
    DATA_PROCESS = 'data-process',
    /** 应用服务 */
    APPLICATION = 'application',
    /** 生态伙伴合作 */
    PARTNER = 'partner',
  }

  onMounted(() => {
    window.addEventListener('scroll', onScroll, true)
  })

  /**
   * 监听：页面滚动
   */
  const onScroll = () => {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    scrollFlag.value = scrollTop > 0
  }

  /**
   * 路由跳转
   * @param menuPath 菜单路径
   */
  const goPage = (menuPath: string) => router.push(`/${menuPath}`)

  /** 菜单是否被选中 */
  const isMenuActive = computed(() => (menuPath: string) => route.path.indexOf(menuPath) > -1)
</script>

<template>
  <div class="header" :class="{ 'scroll-active': scrollFlag }">
    <img class="logo" :src="HeaderImgEnum.logo" @click="goPage(MenuEnum.HOME)" />
    <div class="menu">
      <div class="menu-item" :class="{ active: isMenuActive(MenuEnum.HOME) }" @click="goPage(MenuEnum.HOME)">首页</div>
      <div class="menu-item" :class="{ active: isMenuActive(MenuEnum.DATA_GOVERN) }" @click="goPage(MenuEnum.DATA_GOVERN)">要素治理平台</div>
      <div class="menu-item" :class="{ active: isMenuActive(MenuEnum.DATA_FLOW) }" @click="goPage(MenuEnum.DATA_FLOW)">要素流通平台</div>
      <div class="menu-item" :class="{ active: isMenuActive(MenuEnum.DATA_PROCESS) }" @click="goPage(MenuEnum.DATA_PROCESS)">要素加工平台</div>
      <div class="menu-item" :class="{ active: isMenuActive(MenuEnum.APPLICATION) }" @click="goPage(MenuEnum.APPLICATION)">应用服务</div>
      <div class="menu-item" :class="{ active: isMenuActive(MenuEnum.PARTNER) }" @click="goPage(MenuEnum.PARTNER)">生态伙伴合作</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .header {
    position: relative;
    height: 60px;
    background-color: transparent;
    overflow: hidden;

    &.scroll-active {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      box-shadow: 0 2px 6px 0 rgb(0 0 0 / 20%);
      animation: bg-change 0.5s forwards;
    }

    .logo {
      position: absolute;
      top: 18px;
      left: 40px;
      width: 150px;
      height: 24px;
      cursor: pointer;
    }

    .menu {
      position: absolute;
      top: 0;
      left: 271px;
      display: flex;
      height: 60px;

      .menu-item {
        line-height: 60px;
        font-size: 16px;
        color: #1d2129;
        cursor: pointer;

        &:not(:first-child) {
          margin-left: 40px;
        }

        &.active {
          color: #165dff;
          border-bottom: 2px solid #165dff;
        }
      }
    }
  }

  @keyframes bg-change {
    to {
      background-color: #fff;
    }
  }
</style>
